<template>
  <div class="container">
    <div class="input_modal">
      <div class="input-item">
        <span>经销商编号：</span>
        <el-input
          v-model="trueName"
          placeholder="请输入内容"
          class="proName"
          @keyup.enter.native="search"
        ></el-input>
      </div>
      <div class="input-item">
        <span>经销商类别：</span>
        <el-select
          v-model='testType'
          placeholder='-请选择-'
          @change="getList"
          style="height: 30px;  line-height: 30px;width:200px;"
        >
          <el-option
            label="全部"
            value=""
            style="height: 30px;  line-height: 30px;width:200px;"
          ></el-option>
          <el-option
            label="是"
            value="self"
            style="height: 30px;  line-height: 30px;width:200px;"
          ></el-option>
          <el-option
            label="否"
            value="last"
            style="height: 30px;  line-height: 30px;width:200px;"
          ></el-option>
        </el-select>
      </div>
      <div class="input-item">
        <span>经销商名称：</span>
        <el-input
          v-model="trueName"
          placeholder="请输入内容"
          class="proName"
          @keyup.enter.native="search"
        ></el-input>
      </div>
      <div class="input-item">
        <span>经销商账号：</span>
        <el-input
          v-model="trueName"
          placeholder="请输入内容"
          class="proName"
          @keyup.enter.native="search"
        ></el-input>
      </div>
      <div class="input-item">
        <span>负责人姓名：</span>
        <el-input
          v-model="trueName"
          placeholder="请输入内容"
          class="proName"
          @keyup.enter.native="search"
        ></el-input>
      </div>
      <div class="input-item">
        <span>负责人电话：</span>
        <el-input
          v-model="trueName"
          placeholder="请输入内容"
          class="proName"
          @keyup.enter.native="search"
        ></el-input>
      </div>
      <div class="input-item">
        <span>负分销状态：</span>
        <el-select
          v-model='testType'
          placeholder='-请选择-'
          @change="getList"
          style="height: 30px;  line-height: 30px;width:200px;"
        >
          <el-option
            label="全部"
            value=""
            style="height: 30px;  line-height: 30px;width:200px;"
          ></el-option>
          <el-option
            label="是"
            value="self"
            style="height: 30px;  line-height: 30px;width:200px;"
          ></el-option>
          <el-option
            label="否"
            value="last"
            style="height: 30px;  line-height: 30px;width:200px;"
          ></el-option>
        </el-select>
      </div>
      <div class="input-item">
        <span>所述业务员：</span>
        <el-select
          v-model='testType'
          placeholder='-请选择-'
          @change="getList"
          style="height: 30px;  line-height: 30px;width:200px;"
        >
          <el-option
            label="全部"
            value=""
            style="height: 30px;  line-height: 30px;width:200px;"
          ></el-option>
          <el-option
            label="是"
            value="self"
            style="height: 30px;  line-height: 30px;width:200px;"
          ></el-option>
          <el-option
            label="否"
            value="last"
            style="height: 30px;  line-height: 30px;width:200px;"
          ></el-option>
        </el-select>
        <el-button
          icon="el-icon-search"
          type="primary"
          size="medium"
          @click="getList"
        >查询</el-button>
      </div>

    </div>
    <div class="table_con">
      <el-table
        v-loading="loading"
        :data="tableData"
        :border='true'
      >
        <el-table-column
          :formatter="formatter"
          prop="userCore.trueName"
          label="序号"
        ></el-table-column>
        <el-table-column
          :formatter="formatter"
          prop="userCore.mobile"
          label="经销商编号"
        ></el-table-column>
        <el-table-column
          :formatter="formatter"
          prop="english"
          label="经销商类型"
        ></el-table-column>
        <el-table-column
          :formatter="formatter"
          prop="knowledgeNum"
          label="经销名称"
        ></el-table-column>
        <el-table-column
          :formatter="formatter"
          prop="memo"
          label="负责人姓名"
        ></el-table-column>
        <el-table-column
          :formatter="formatter"
          prop="gmtCreated"
          label="负责人电话"
        ></el-table-column>
        <el-table-column
          :formatter="formatter"
          prop="gmtCreated"
          label="地址"
        ></el-table-column>
        <el-table-column
          :formatter="formatter"
          prop="gmtCreated"
          label="所属业务员"
        ></el-table-column>
        <el-table-column
          :formatter="formatter"
          prop="gmtCreated"
          label="经销商账号"
        ></el-table-column>
        <el-table-column
          :formatter="formatter"
          prop="gmtCreated"
          label="经销状态"
        ></el-table-column>
        <el-table-column
          prop=""
          label="操作"
          width='180'
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
            >禁用</el-button>
            <el-button
              class="link"
              type="primary"
              size="mini"
            >
              <router-link
                :to="{ path: 'distributorDetail',query: {id: scope.row.id, pageIndex:pageIndex}}"
                style="color: #fff;"
              >查看详情</router-link>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        :page-sizes='[10,20,30,40]'
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
export default {
  data() {
    return {
      tableData: [],
      pageCount: null,
      pageIndex: 1,
      pageSize: 10,
      loading: true,
      trueName: null,
      mobile: null,
      english: null
    };
  },
  mounted() {
    this.pageIndex = this.$router.currentRoute.query.pageIndex
      ? this.$router.currentRoute.query.pageIndex
      : 1;
    this.getList();
  },
  methods: {
    formatter(row, column, cellValue) {
      return cellValue ? cellValue : "- -";
    },
    getList: function() {
      let url = CONSTANT.URL.LIST.CORRECTLIST;
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        english: this.english,
        mobile: this.mobile,
        trueName: this.trueName
      };
      this.loading = true;
      common.requestAjax(url, JSON.stringify(data), null, res => {
        this.loading = false;
        let data = res.data;
        this.tableData = data.bussData;
        this.pageCount = data.count;
      });
    },
    search: function(e) {
      if (e.keyCode == 13) {
        this.pageIndex = 1;
        this.getList();
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getList();
    }
  }
};
</script>
